import React, { PureComponent } from "react"
import { NavLink, Link, Route, Routes, Navigate } from "react-router-dom"
import Home from "./pages/Home"
import About from "./pages/About"
import "./style.css"
import Login from "./pages/Login"
import NotFound from "./pages/NotFound"
import HomeRecommend from "./pages/HomeRecommend"
import HomeRanking from "./pages/HomeRanking"
import Category from "./pages/Category"
import Order from "./pages/Order"

export class App extends PureComponent {
    render() {
        return (
            <div className="app">
                <div className="header">
                    <span>header</span>
                    <div className="nav">
                        {/* <NavLink
                            to="/home"
                            style={({ isActive }) => ({ color: isActive ? "red" : "" })}
                        >
                            首页
                        </NavLink>
                        <NavLink
                            to="/about"
                            style={({ isActive }) => ({ color: isActive ? "red" : "" })}
                        >
                            关于
                        </NavLink> */}
                        {/* <NavLink
                            to="/home"
                            className={({ isActive }) => (isActive ? "active-link" : "")}
                        >
                            首页
                        </NavLink>
                        <NavLink
                            to="/about"
                            className={({ isActive }) => (isActive ? "active-link" : "")}
                        >
                            关于
                        </NavLink> */}

                        <Link to="/home">首页</Link>
                        <Link to="/about">关于</Link>
                        <Link to="/login">登录</Link>
                        <button>分类</button>
                        <span>订单</span>
                    </div>
                    <hr />
                </div>
                <div className="content">
                    {/* 映射关系：path=> Component */}
                    <Routes>
                        <Route path="/" element={<Home />}></Route>
                        <Route path="/home" element={<Home />}>
                            <Route path="/home" element={<Navigate to="/home/recommend" />}></Route>
                            <Route path="/home/recommend" element={<HomeRecommend />}></Route>
                            <Route path="/home/ranking" element={<HomeRanking />}></Route>
                        </Route>
                        <Route path="/about" element={<About />}></Route>
                        <Route path="/login" element={<Login />}></Route>
                        <Route path="/category" element={<Category />}></Route>
                        <Route path="/order" element={<Order />}></Route>
                        <Route path="*" element={<NotFound />} />
                    </Routes>
                </div>
                <div className="footer">
                    <hr />
                    Footer
                </div>
            </div>
        )
    }
}

export default App
